<template>
	<div>
		<el-row :gutter="20" v-permission="['getStatistics1,GET']">
			<!-- 骨架屏加载 -->
			<template v-if="panels.length == 0">
				<el-col :span="6" :offset="0" v-for="i in 4" :key="i">
					<el-skeleton style="width: 100%" animated loading>
						<template #template>
							<el-card shadow="hover" class="border-0">
								<template #header>
									<div class="flex justify-between">
										<el-skeleton-item variant="text" style="width:50%" />
										<el-skeleton-item variant="text" style="width: 10%" />
									</div>
								</template>
								<el-skeleton-item variant="h3" style="width: 80%" />
								<el-divider />
								<div class="flex justify-between text-sm text-gray-500">
									<el-skeleton-item variant="text" style="width: 50%" />
									<el-skeleton-item variant="text" style="width: 10%" />
								</div>
							</el-card>
						</template>
					</el-skeleton>
				</el-col>
			</template>
	
			<!-- 实际后台主页数据 -->
			<el-col :span="6" :offset="0" v-for="(item, index) in panels" :key="index">
				<el-card shadow="hover" class="border-0">
					<template #header>
						<div class="flex justify-between">
							<span class="text-sm">{{ item.title }}</span>
							<el-tag :type="item.unitColor" effect="plain">
								{{ item.unit }}
							</el-tag>
						</div>
					</template>
					<span class="flex justify-center text-3xl font-bold text-gray-500">
						<CountTo :value="item.value"></CountTo>
					</span>
					<el-divider />
					<div class="flex justify-between text-sm text-gray-500">
						<span>{{ item.subTitle }}</span>
						<span>{{ item.subValue }}</span>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<IndexNavs></IndexNavs>

		<el-row :gutter="20">
			<el-col :span="12" :offset="0">
				<IndexChart v-permission="['getStatistics3,GET']"></IndexChart>
			</el-col>
			<el-col :span="12" :offset="0" v-permission="['getStatistics2,GET']">
				<IndexCard title="店铺/商品提示" tip="店铺/商品信息提示" :infos="goods" class="mb-4"></IndexCard>
				<IndexCard title="交易信息提示" tip="需要立即处理的交易订单" :infos="order"></IndexCard>
			</el-col>
		</el-row>

	</div>
</template>

<script setup>
import { getStatistics1, getStatistics2 } from "~/api/index.js";
import { ref } from "vue";
import CountTo from "~/components/CountTo.vue";
import IndexNavs from "~/components/IndexNavs.vue";
import IndexChart from "~/components/IndexChart.vue";
import IndexCard from "~/components/IndexCard.vue";

// 定义变量记录后台主页面板数据
const panels = ref([])

getStatistics1().then(res => {
	// console.log(res)
	panels.value = res.panels
})

const goods = ref([])
const order = ref([])
getStatistics2().then(res => {
	// console.log(res)	// 得到goods和order的数组
	goods.value = res.goods
	order.value = res.order
})
</script>